<template>
	<view class="license-page">
		<!-- 自定义导航栏 -->
		<view class="custom-nav-bar">
			<!-- 左侧返回按钮 -->
			<view class="left-icon" @click="goBack">
				<image src="/static/back.png" mode="aspectFit" class="tab-img"></image>
			</view>
			<!-- 中间 Tab 栏 -->
			<view class="top-tab">
				<view class="tab-item" :class="{ active: currentTab === 'scan' }" @click="currentTab = 'scan'">
					扫码识别
				</view>
				<view class="tab-item" @click="handleManualInput" style="margin-left: 50rpx;">
					手动输入
				</view>
			</view>
			<!-- 右侧占位，保持导航栏对称 -->
			<view class="right-placeholder"></view>
		</view>

		<!-- 扫码区域（currentTab 为 scan 时显示） -->
		<view v-if="currentTab === 'scan'" class="scan-container">
			<!-- 摄像头组件（H5/App 可用） -->
			<camera v-if="hasCamera" class="camera" device-position="back" flash="off" @error="onCameraError"
				ref="camera">
				<!-- 扫码框（四角样式） -->
				<view class="scan-box">
					<view class="corner top-left"></view>
					<view class="corner top-right"></view>
					<view class="corner bottom-left"></view>
					<view class="corner bottom-right"></view>
				</view>
				<!-- 扫描提示文字 -->
				<text class="scan-tip">将{{ currentBottomTab === 'plate' ? '车牌' : '车架号' }}放入框内即可自动扫描</text>
			</camera>

			<!-- 功能按钮区 -->
			<view class="func-area">
				<view class="func-buttons">
					<view class="btn-group" @click="pickFromAlbum">
						<view class="icon">
							<image src="/static/album.png" mode="aspectFit" />
						</view>
						<text>相册</text>
					</view>
					<view class="btn-group" @click="toggleFlash">
						<view class="icon">
							<image :src="flashOn ? '/static/flash-on.png' : '/static/flash-of.png'" mode="aspectFit" />
						</view>
						<text>{{ flashOn ? '关灯' : '开灯' }}</text>
					</view>
				</view>
				<button class="manual-btn" @click="handleManualInput">手动输入</button>
			</view>
		</view>

		<!-- 底部 Tab 栏（车牌号/车架号切换） -->
		<view class="bottom-tab">
			<view class="tab-items" :class="{ active: currentBottomTab === 'plate' }">
				<image :src="currentBottomTab === 'plate' ? '/static/plate-icon-ac.png' : '/static/plate-icon.png'"
					mode="aspectFit" class="bottom-icon" />
				<text>车牌号</text>
			</view>
			<view class="tab-items" :class="{ active: currentBottomTab === 'vin' }">
				<image :src="currentBottomTab === 'vin' ? '/static/vin-icon-ac.png' : '/static/vin-icon.png'"
					class="bottom-icon" />
				<text>车架号</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				currentTab: 'scan', // 初始状态设为扫码
				currentBottomTab: 'plate', // 初始化时不激活任何底部tab
				plateNumber: '', // 车牌号初始为空
				vinNumber: '', // 车架号初始为空
				flashOn: false,
				hasCamera: true,
			};
		},
		methods: {
			// 相机出错处理
			onCameraError(e) {
				console.error('Camera Error:', e);
				uni.showToast({
					title: '摄像头初始化失败',
					icon: 'none'
				});
				this.hasCamera = false;
			},

			// 从相册选择图片
			pickFromAlbum() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						this.uploadToPlateApi(tempFilePath);
					},
					fail: (err) => {
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					},
				});
			},
			// 控制闪光灯
			async toggleFlash() {
				if (!this.hasCamera) return;

				const camera = this.$refs.camera;
				if (camera) {
					try {
						await camera.setFlashMode(this.flashOn ? 'off' : 'torch');
						this.flashOn = !this.flashOn;
					} catch (e) {
						uni.showToast({
							title: '闪光灯不可用',
							icon: 'none'
						});
					}
				}
			},
			// 上传图片到车牌/车架号识别接口
			uploadToPlateApi(imagePath) {
				uni.showLoading({
					title: '识别中...'
				});

				let apiUrl = this.currentBottomTab === 'plate' ? 'http://test.cheba.cc/api/store/checklp' :
					'http://test.cheba.cc/api/user/queryvin';

				uni.uploadFile({
					url: apiUrl,
					filePath: imagePath,
					name: 'file',
					header: {
						'Content-Type': 'multipart/form-data',
					},
					success: (res) => {
						try {
							const data = JSON.parse(res.data);
							if (data.code === 200) {
								if (this.currentBottomTab === 'plate') {
									this.plateNumber = data.result.plateNumber || '';
									uni.showToast({
										title: '车牌识别成功',
										icon: 'success'
									});
									this.switchBottomTab('vin'); // 成功识别车牌后激活车架号扫描
									this.currentBottomTab = 'vin'; // 立即切换到车架号扫描
									// 可以考虑在这里再次调用uploadToPlateApi来实现自动车架号扫描
								} else if (this.currentBottomTab === 'vin') {
									this.vinNumber = data.result.vin || '';
									this.currentBottomTab = 'plate';
									uni.showToast({
										title: '车架号识别成功',
										icon: 'success'
									});
									this.goToDetailPage(); // 跳转至详情页
								}
							} else {
								uni.showToast({
									title: '识别失败: ' + (data.msg || '未知错误'),
									icon: 'none'
								});
							}
						} catch (e) {
							uni.showToast({
								title: '解析失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					},
				});
			},
			// 处理手动输入跳转
			handleManualInput() {
				uni.navigateTo({
					url: '/pages/area/area'
				});
			},
			// 返回上一页的方法
			goBack() {
				uni.navigateBack();
			},

			// 跳转至详情页
			goToDetailPage() {
				uni.navigateTo({
					url: '/pages/detail/detail?plateNumber=' + this.plateNumber + '&vinNumber=' + this.vinNumber
				});
			},
		},
		onLoad() {
			// 页面加载时初始化为车牌号扫描
			this.currentBottomTab = 'plate';
		}
	};
</script>
<style scoped>
	.license-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		color: #ffffff;
	}

	/* 自定义导航栏 */
	.custom-nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ccc;
		/* 导航栏深色背景 */
		border-bottom: 1px solid #333;
		/* 底部分割线 */
	}

	.left-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.tab-img {
		width: 100%;
		height: 100%;
	}

	.top-tab {
		display: flex;
		flex: 1;
		justify-content: center;
	}

	.tab-item {
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		color: white;
	}

	.tab-item.active {
		color: #ff9900;
		/* 激活态橙色 */
		font-weight: bold;
	}

	.right-placeholder {
		width: 40rpx;
		height: 40rpx;
	}

	/* 扫码区域 */
	.scan-container {
		flex: 1;
		position: relative;
		overflow: hidden;
	}

	.camera {
		width: 100%;
		height: 50vh;
		/* 摄像头区域高度 */
	}

	/* 扫码框-四角样式 */
	.scan-box {
		position: absolute;
		top: 25%;
		left: 50%;
		transform: translateX(-50%);
		width: 400rpx;
		height: 200rpx;
		position: relative;
	}

	.corner {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid #fff;
	}

	.top-left {
		top: 0;
		left: 0;
		border-right: transparent;
		border-bottom: transparent;
	}

	.top-right {
		top: 0;
		right: 0;
		border-left: transparent;
		border-bottom: transparent;
	}

	.bottom-left {
		bottom: 0;
		left: 0;
		border-top: transparent;
		border-right: transparent;
	}

	.bottom-right {
		bottom: 0;
		right: 0;
		border-top: transparent;
		border-left: transparent;
	}

	.scan-tip {
		position: absolute;
		top: calc(25% + 180rpx);
		/* 扫码框下方 */
		left: 50%;
		transform: translateX(-50%);
		color: #ddd;
		font-size: 28rpx;
	}

	/* 功能按钮区 */
	.func-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		background-color: #23282c;
		height: 40vh;
	}

	.func-buttons {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-bottom: 60rpx;
	}

	.btn-group {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.icon {
		width: 100rpx;
		height: 100rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;
	}

	.icon image {
		width: 60rpx;
		height: 60rpx;
	}

	.manual-btn {
		background: #fff;
		color: #000;
		width: 200rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
	}

	/* 底部 Tab 栏 */
	.bottom-tab {
		display: flex;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #23282c;
		align-items: center;
	}

	.tab-items {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #ccc;
		font-size: 24rpx;
	}

	.tab-items.active {
		color: #ff9900;
		/* 激活态橙色 */
	}

	.bottom-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 5rpx;
	}
</style>